<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.family{
				width: 800px;
				height: 210px;
				margin: 40px auto;
			}
			
			td{
				width: 100px;
				height: 30px;
				text-align: center;
			}
			.first{
				background-color: cornflowerblue;
				color: white;
			}
			.second,.fourth,.sixth{
				background-color: gainsboro;
			}
			.third,.fifth,.seventh{
				background-color: gray;
			}
			tbody tr:hover{
				background-color: ghostwhite;
			}
			
		</style>
	</head>
	<body>
		<div class="family">
			<table>
				<thead>
				<tr class="first">
					<td>序号</td>
					<td>姓名</td>
					<td>课程</td>
					<td>成绩</td>
				</tr>
				</thead>
				<tbody>
				<tr class="second">
					<td>1</td>
					<td>吕不韦</td>
					<td>语文</td>
					<td>100</td>
					
				</tr>
				<tr class="third">
					<td>2</td>
					<td>吕布</td>
					<td>日语</td>
					<td>100</td>
				</tr>
				<tr class="fourth">
					<td>3</td>
					<td>吕蒙</td>
					<td>营销学</td>
					<td>100</td>
				</tr>
				<tr class="fifth">
					<td>4</td>
					<td>吕尚</td>
					<td>数学</td>
					<td>100</td>
				</tr>
				<tr class="sixth">
					<td>5</td>
					<td>吕雉</td>
					<td>英语</td>
					<td>100</td>
				</tr>
				<tr class="seventh">
					<td>6</td>
					<td>吕超</td>
					<td>体育</td>
					<td>100</td>
				</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>
